<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<!-- https://codepen.io/danielkvist/pen/LYNVyPL -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/userLogin.css">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/animate.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/login.css">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="./js/vue.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="./js/echarts.min.js"></script>
</head>

<body>
<div id="particles-js" style="display: flex;align-items: center;justify-content: center">
    <canvas class="particles-js-canvas-el" style="width: 100%; height: 100%;" width="472" height="625"></canvas>
</div>
<div class="container right-panel-active">
    <!-- Sign Up -->
    <div class="container__form container--signup">
        <form action="UserRegisterServlet" class="form" id="form1" method="post">
            <h2 class="form__title">注册</h2>
            <input type="text" placeholder="UserName" class="input" name="username"/>
            <input type="password" placeholder="PassWord" class="input" name="password"/>
            <input type="email" placeholder="Email" class="input" name="email"/>
            <button class="btn" type="submit" id="zhu">Sign Up</button>
        </form>
    </div>

    <!-- Sign In -->
    <div class="container__form container--signin">
        <form action="UserLoginServlet" class="form" id="form2" method="get">
            <h2 class="form__title">登录</h2>
            <input type="text" placeholder="UserName" class="input" name="username"/>
            <input type="password" placeholder="Password" class="input" name="password"/>
            <a href="#" class="link">忘记密码?</a>
            <button class="btn" type="submit">Sign In</button>
        </form>
    </div>

    <!-- Overlay -->
    <div class="container__overlay">
        <div class="overlay">
            <div class="overlay__panel overlay--left">
                <button class="btn" id="signIn">Sign In</button>
            </div>
            <div class="overlay__panel overlay--right">
                <button class="btn" id="signUp">Sign Up</button>
            </div>
        </div>
    </div>
    <button class="fm" name="failMsg" @change="open2"></button>
    <button class="fm" name="failMsg" @change="toggleOpen"></button>
    <%--    <button class="fm1" name="failMsg" @click="open4"></button>--%>
</div>
</body>
<script src="js/login.js"></script>
<script src="js/loginApp.js"></script>
<script>
    const signInBtn = document.getElementById("signIn");
    const signUpBtn = document.getElementById("signUp");
    const fistForm = document.getElementById("form1");
    const secondForm = document.getElementById("form2");
    const container = document.querySelector(".container");

    const fm = document.querySelector(".fm")
    fm.style.display = "none"
    fm.innerHTML = "${failMsg}"

    if (fm.innerText === "您已成功注册，前往登陆吧") {
        alert("您已成功注册，前往登陆吧")
        container.classList.remove("right-panel-active")
    }

    signInBtn.addEventListener("click", () => {
        container.classList.remove("right-panel-active");
    });

    signUpBtn.addEventListener("click", () => {
        container.classList.add("right-panel-active");
    });
</script>
<script>
    new Vue({
        el: '.app',
        data() {
            let item = 123;
            return {
                item,
            }
        }, methods: {
            open1() {
                this.$message('${failMsg}');
            },
            open2() {
                console.log("open2点击")
                this.$message({
                    message: '${failMsg}',
                    type: 'success'
                });
            },
            open3() {
                this.$message({
                    message: '${failMsg}',
                    type: 'warning'
                });
            },
            open4() {
                this.$message.error('${failMsg}');
            }
        }
    })

</script>
</html>

